import { DatePicker as AntdDatePicker } from 'antd';
import moment from 'moment';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.less';
export default class DatePicker extends React.Component{
     div;
    constructor(props) {
        super(props);
        this.state = {
            open: false
        }
    }
     openModal = () => {
        this.toggleOpen({ open: true });
    }
     fixedPosition = (left, top) => {
        this.setState({
            left, top
        })
    }
     toggleOpen = (state) => {
        this.setState(state, () => {
            if (!state.open) {
                if (this.props.onClose) {
                    this.props.onClose((ReactDOM.findDOMNode(this)).parentElement);
                }
            }
        });
    }
     componentDidMount() {
        this.div = document.createElement('div');
        this.div.className = 'edc-date-picker-mask';
        this.div.style.display = 'none';
        document.body.appendChild(this.div);
    }
     componentDidUpdate() {
        if (this.div) {
            if (this.state.open) {
                this.div.style.display = 'block';
            } else {
                this.div.style.display = 'none';
            }
        }
    }
     componentWillUnmount() {
        document.body.removeChild(this.div);
    }
     render() {
        return (
            <div style={{ display: '' }}>
                <div style={{position:'fixed', top:this.state.top, left:this.state.left, visibility:'hidden'}}>
                    <AntdDatePicker ecId={`${this && this.props && this.props.ecId || ''}_AntdDatePicker@zd0qe0`}
                        format={this.props.formatter}
                        showTime={this.props.showtime}
                        open={this.state.open}
                        toggleOpen={this.toggleOpen}
                        onChange={this.changeValue}
                        popupStyle={{ left: this.state.left, top: this.state.top }}
                        value={this.props.value}
                        disabledDate={this.disabledDate}
                    />
                </div>
            </div>
        )
    }
     changeValue = (moment, date2) => {
        if (typeof this.props.onChange === 'function') {
            this.props.onChange(date2);
        }
    }

    disabledDate = (current) => {
        const startDate = this.props.startDate;
        const endDate = this.props.endDate;
        const startDateTime = new Date(startDate);
        let endDateTime = new Date(endDate);
        if (current) {
            if (!this.props.value) {
                endDateTime.setDate(endDateTime.getDate() + 1);
            }
            if (startDate && endDate) {
                return current && current.getTime() < startDateTime.getTime() || current.getTime() > endDateTime.getTime();
            }
            if (startDate && !endDate) {
                return current && current.getTime() < startDateTime.getTime();
            }
        }
    }
}